﻿@{
    ViewData["Title"] = "Home Page";
    var readPos = ViewData.ContainsKey("read_pos") ? (int)ViewData["read_pos"] : 1;
}
@model Book;

<style>
    .pdf-content {
        display: flex;
        flex-grow: 1;
    }
    .pdf-page{
        flex-basis: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .drawer {
        position: fixed;
        top: 56px;
        left: -300px; /* 默认隐藏 */
        width: 300px;
        height: 100%;
        background-color: #f8f9fa;
        transition: left 0.3s; /* 平滑过渡效果 */
        z-index: 1050; /* 确保抽屉在顶部 */
        overflow: scroll;
    }

    .drawer.open {
        left: 0; /* 打开时显示 */
    }


    /* 固定左侧工具栏 */
    .sidebar {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 70px;
        height: auto;
        background-color: #333;
        z-index: 1000;
        padding: 10px;
    }

    /* 工具栏中的链接样式 */
    .sidebar a {
        display: block;
        color: white;
        text-align: center;
        padding: 10px;
        text-decoration: none;
    }

    /* 鼠标悬停时的链接样式 */
    .sidebar a:hover {
        background-color: #555;
    }
</style>


<!-- 抽屉内容 -->
<div id="drawer" class="drawer">
    <ul class="list-group list-group-flush" id="catalog">
        <li class="list-group-item">目录 <span style="float:right; margin-right: 5px" onclick="ChangeCatalog()">X</span></li>
    </ul>
</div>

<div class="pdf-content">
    <div class="pdf-page" id="page1Con" onclick="PrePage()">
        <canvas class="pdf-page" id="page1"></canvas>
    </div>
    <div class="pdf-page" id="page2Con" onclick="NextPage()">
        <canvas class="pdf-page" id="page2"></canvas>
    </div>
</div>

<div class="sidebar">
    <a href="javascript:void (0)" onclick="ChangeCatalog()">目录</a>
</div>

@section Scripts
{
    <script src="~/lib/pdfjs-4.7.76-dist/build/pdf.mjs" type="module"></script>
    <script>
        let path = `/@Model.StoragePath.Replace(@"\", @"/")`;
        let readPos = @readPos;
    </script>
    // 在视图中声明一个 JavaScript 函数来构建 URL
    <script type="text/javascript">
    function buildUrl(controllerName, actionName, params) {
        var url = '@Url.Content("~/")'; // 获取应用程序的基本 URL
        url += controllerName + "/" + actionName;
        if (params) {
            var first = true;
            for (var key in params) {
                if (first) {
                    url += "?";
                    first = false;
                } else {
                    url += "&";
                }
                url += key + "=" + encodeURIComponent(params[key]);
            }
        }
        return url;
    }
    
    function UploadReadPos(pos)
    {
        var controllerName = "Book";
        var actionName = "RecordPdfPos";
        var params = { bookId: @Model.Id, pos: pos};
        // 构建 URL
        var url = buildUrl(controllerName, actionName, params);
        $.ajax({
            url: url,
            type: 'GET',
            success: function (data) {
                // 处理成功响应
                console.log(data);
            },
            error: function (error) {
                // 处理错误响应
                console.log(error);
            }
        });
    }
    
</script>
    <script src="~/js/pdf_reader.js" type="module"></script>
    <script>
        $('#drawer').toggleClass('open');
        function ChangeCatalog() {
            $('#drawer').toggleClass('open');
        }
    </script>
}